<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <title>注册</title>
    <meta charset="utf-8">
</head>


<form action="{{ url_for('login.register') }}" method="post">
    {{ form.hidden_tag() }}
    {{ form.tel.label }}
    {{ form.tel(id='phone') }}
    {% for message in form.tel.errors %}
        <small>{{ message }}</small>
    {% endfor %}
    <br>
    {{ form.v_code.label }}
    {{ form.v_code }}
    <input type="button" id="getCode" onclick="send_message()" value="获取验证码"/>
    {% for message in form.v_code.errors %}
        <small>{{ message }}</small>
    {% endfor %}
    <br>
    {{ form.password1.label }}
    {{ form.password1 }}
    {% for message in form.password1.errors %}
        <small>{{ message }}</small>
    {% endfor %}
    <br>
    {{ form.password2.label }}
    {{ form.password2 }}<br>
    {{ form.submit }}
    <a href="{{ url_for('login.findpassword') }}">忘记密码</a>
</form>
<script src="../static/lib/jquery-2.1.4.js"></script>
<script src="../static/lib/fastclick.js"></script>
<script src="../static/js/jquery-weui.js"></script>


{% if error_msg %}
    <script>
        $(function () {
            $.alert("{{ error_msg }}", "警告")
        });
    </script>

{% endif %}

{% if success == 1 %}
    <script>
        $(function () {
            $.alert("注册成功", "提示",
                function () {
                    window.location.href = '/';
                }
            )
        });
    </script>
{% endif %}


<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>

<script>
    //      $("#showTooltips").click(function() {
    //        var tel = $('#phone').val();
    //        var code = $('#code').val();
    //        if(!tel || !/^1[3|4|5|7|8]\d{9}$/.test(tel)) $.toptip('请输入手机号');
    //        else if(!code || !/^\d{6}$/.test(code)) $.toptip('请输入六位手机验证码');
    //        else $.toptip('提交成功', 'success');
    //      });
    function check_data() {
        var tel = $('#phone').val();
        var code = $('#code').val();
        var password = $('#password').val();
        var confirm = $('#confirm').val();

        if (!tel || !/^1[3|4|5|7|8]\d{9}$/.test(tel)) $.toptip('请输入手机号');
        else if (!code || !/^\d{6}$/.test(code)) $.toptip('请输入六位手机验证码');
        else if (backcode) {
            $.toptip(backcode);
        } else if (!password || !/^[a-zA-Z\d_]{6,12}$/.test(password)) $.toptip('请正确设置密码');
        else if (confirm != password) {
            $.toptip('密码不一致');
        } else if ($("input[type='checkbox']").is(':checked') == false) {
            $.toptip('请阅读相关条款');
        } else {
            document.getElementById('my-form').submit();
        }
        var backcode = {{ error_msg }};
        {#            if(backcode){#}
        {#                $.toptip(backcode);#}
        {#                $(function() {#}
        {#                    $.alert("{{ backcode }}", "警告")#}
        {#                });#}
        {#            }#}

    }
</script>

<!--peak's script-->
<script type="text/javascript">
    var cur_count;
    var count = 60; // 重复发送验证码的周期(s)
    var InterValObj;
    var phone_number;

    function send_message() {
        // 获取用户输入的手机号码
        // 如果手机号码为空则弹窗提醒
        // 否则使用 ajax 将号码提交给后台，并且开始倒计时
        phone_number = document.getElementById("phone").value


        if (!phone_number || !/1[3|4|5|7|8]\d{9}/.test(phone_number)) {
            alert('请输入正确的手机号码!')
        } else if (phone_number) {
            cur_count = count;

            // 设置按钮属性，使按钮不能响应点击事件
            document.getElementById("getCode").setAttribute("disabled", "true");
            document.getElementById("getCode").value = "     " + cur_count + "s";

            // HTML DOM setInterval() 方法可以按照指定的周期（毫秒单位）来调用函数或计算表达式
            // 这里我们以 1000 毫秒为周期重复调用 set_remain_time() 函数实现倒计时
            InterValObj = window.setInterval(set_remain_time, 300);

            // 发送请求
            loadXMLDoc();
        }


    }

    function set_remain_time() {
        {#            var backcode = {{ error_msg|tojson }};#}
        {#            if(backcode)#}
        {#            {#}
        {#                {$.toptip(backcode);}#}
        {#            }#}
        if (cur_count == 0) {
            // 将 InterValObj 传递给 clearInterval， 从而取消对 set_remian_time() 的重复调用
            window.clearInterval(InterValObj);

            // 恢复按钮响应点击事件
            document.getElementById("getCode").removeAttribute("disabled");
            document.getElementById("getCode").value = "获取验证码";
        } else {
            cur_count--;
            document.getElementById("getCode").value = "   " + cur_count + "s";
        }
    }

    function loadXMLDoc() {
        var xmlhttp = new XMLHttpRequest();

        xmlhttp.open("GET", "register?mobile_phone_number=" + phone_number, true);
        xmlhttp.send();


    }
</script>

</body>
</html>
